
{% extends 'news/base_login.html' %}
{% load staticfiles %}
{% block title %}用户{{ user.nickname }}的主页{% endblock %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'news/css/base_login.css' %}" charset="utf-8">
<link rel="stylesheet" type="text/css" href="{% static 'news/css/my_vip.css' %}" charset="utf-8">

<!--<link rel="stylesheet" type="text/css" href="{% static 'news/article.css' %}">-->
{% endblock %}
{% block content %}
{% block content_login %}
<div id="i1">
    <div id="i2">
        <div id="i3"><a href="{% url 'news:main_index' %}"><img id='m1' src="{% static 'news/images/1234.jpg' %}"/></a></div>
        <div id="i4">{{ user.nickname }}</div>
        <img id="m2" src="{% static 'news/images/5.png' %}"/>
        <img id="m3" src="{% static 'news/images/6.png' %}"/>
        <div id="i5">剩余积分</div>
        <div id="i6">{{ user.integral }}</div>
        <div id="i7"></div>
        <div id="i8">剩余发布次数</div>
        <div id="i9">{{ user.number }}</div>
    </div>
    <div id="i11" >
        <div id="i12" class="c"><img src="{% static 'news/images/my_vip.png' %}"/></div>
        <div id="i13"><a href="{% url 'news:my_vip' %}" style="text-decoration:none; color:black;">我的会员</a></div>
    </div>
    <div id="i14" >
        <div id="i15" class="c"><img src="{% static 'news/images/my_jf.png' %}"/></div>
        <div id="i16"><a href="{% url 'news:my_integral' %}" style="text-decoration:none; color:black;">我的积分</a></div>
    </div>
    <div id="i17">
        <div id="i18" class="c"><img src="{% static 'news/images/post_n.png' %}"/></div>
        <div id="i19"><a href="{% url 'news:mypublish' %}" style="text-decoration:none; color:black;">我的发布</a></div>
    </div>
    <div id="i20" >
        <div id="i21" class="c"><img src="{% static 'news/images/xxx_n.png' %}"/></div>
        <div id="i22" style="text-decoration:none;"><a href="{% url 'news:my_message' %}" style="text-decoration:none; color:black;">消息通知</a></div>
    </div>

    <div id="i23">
        <div id="i24"></div>
        <div id="i25"><img src="{% static 'news/images/sz.png' %}"/></div>
        <div id="i26" style="font-size: 18px;
        position: absolute;
        top: 18px;
        left: 59px;
        height: 25px">设置</div>
		<div id="i27"><img src="{% static 'news/images/xia.png' %}"/></div>
	</div>
	<div id="i28" style="list-style:none; position: absolute; top: 505px; left: 0px;">
		<ul>
			<p id="i29"><a href="{% url 'news:user_index' %}" style="text-decoration:none; color:black;">个人资料</a></p>
			<p><a href="{% url 'news:alert_pwd_1' %}" style="text-decoration:none; color:black;">修改密码</a></p>
			<a href="{% url 'news:main_index' %}" style="text-decoration:none; color:black">退出登录</a>
		</ul>
	</div>


    <!--<div id="i29" style="position: absolute;top:0;left: 320px;width: 100px;height: 100px;">我的发布</div>-->

</div>

            <ul id="u1">
				<li>我的会员
				<div id="li1">当前<span id="sp3">VIP{{ user.vip }}</span>级，本月剩余文章发布次数：<span id="sp2">{{user.number}}</span>次 <span id="sp1"><a href="{% url 'news:recharge' %}">续费/升级</a></span></div>
				</li>
				<div id="dd1"></div>
				<li id="li2">会员等级说明</li>
				<div id="dd2">
					<div class="vip1" id="vip1"><img src="{% static 'news/images/chongzhi/v1.png' %}" ><p class="ps1">￥2000</p> <p class="ps2">每个月可免费发<br>布2条新闻</p></div>
					<div class="vip1" id="vip2"><img src="{% static 'news/images/chongzhi/v2.png' %}" ><p class="ps1">￥5000</p> <p class="ps2">每个月可免费发<br>布5条新闻</p></div>
					<div class="vip1" id="vip3"><img src="{% static 'news/images/chongzhi/v3.png' %}" ><p class="ps1">￥10000</p><p class="ps2">每个月可免费发<br>布10条新闻</p></div>
				</div>
				<div id="dd3"></div>
				<li id="li3">购买记录</li>
				<table border="0px" cellspacing="0" cellpadding="10" id="table1">
					{% if user_vip %}
						{% for i in user_vip %}
						<tr>
							<td>交易单号{{i.pays_number}}</td>
							<td class="t1">¥{{i.pays_money}}</td>
							<td class="t1">{{i.pays_time|date:'Y-m-d H:i:s'}}</td>
						</tr>
						{% endfor %}
					{% else %}
						<p style="position: relative; top: 90px;">暂无交易记录</p>
					{% endif %}
				</table>
			</ul>

		<ul class="pag" style="position:relative; top:-100px; left:780px; list-style-type: none;">
					{% if user_vip.has_previous %}
					<li style="display: inline-block; margin-left:10px;"><a href="?page={{user_vip.previous_page_number}}" aria-label="Previous" style="text-decoration:none">
						<span aria-hidden="true">上一页</span>
						</a>
					</li>
					{% endif %}
					{% for pg in user_vip.paginator.page_range %}
						{% if user_vip.number == pg %}
							<li style="display: inline-block; margin-left:10px;"><a href="?page={{pg}}" style="text-decoration:none">{{pg}}</a></li>
						{% else %}
							<li style="display: inline-block; margin-left:10px;"><a href="?page={{pg}}" style="text-decoration:none">{{pg}}</a></li>
						{% endif %}
					{% endfor %}

					{% if user_vip.has_next %}
						<li style="display: inline-block; margin-left:10px;">
							<a href="?page={{user_vip.next_page_number}}" aria-label="Next" style="text-decoration:none">
								<span aria-hidden="true">下一页</span>
							</a>

						</li>
					{% endif %}
				</ul>
			</ul>



<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
<!--i27是设置栏右边的下拉小图标点击旋转或恢复-->
	$(function() {
		  var r = 0;
		  $('#i23').click(function() {
			r += 90;
			$("#i27").css('transform', 'rotate(' + r + 'deg)');
			if(r > 90){r = 0;
				$("#i27").css('transform', 'rotate(' + 0 + 'deg)');
			}
		  });
		});

<!--i23是设置栏，i28是下拉菜单栏-->
	$("#i23").click(function(){
		 $("#i28").toggle();
		 })



</script>

{% endblock %}
{% endblock %}




